<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>

    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>校园之地</title>
    <link rel="stylesheet" th:href="@{/libs/layui/css/layui.css}" />
    <link th:href="@{/css/page.css}" rel="stylesheet" type="text/css" />



</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">校园应用系统</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <!--<ul class="layui-nav layui-layout-left">
            &lt;!&ndash; 移动端显示 &ndash;&gt;
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">nav groups</a>
                <dl class="layui-nav-child">
                    <dd><a href="">menu 11</a></dd>
                    <dd><a href="">menu 22</a></dd>
                    <dd><a href="">menu 33</a></dd>
                </dl>
            </li>
        </ul>-->
<ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
            <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
            tester
        </a>
        <dl class="layui-nav-child">
            <dd><a href="">Your Profile</a></dd>
            <dd><a href="">Settings</a></dd>
            <dd><a href="">Sign out</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
        <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
        </a>
    </li>
</ul>
</div>

<div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
                <a class="" href="javascript:;">学生管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="/findAll">学生基本信息管理</a></dd>
                 <!--   <%&#45;&#45;  <dd><a href="javascript:;">menu 2</a></dd>
                      <dd><a href="javascript:;">menu 3</a></dd>
                      <dd><a href="">the links</a></dd>&#45;&#45;%>-->
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:;">教室管理</a>
                <dl class="layui-nav-child">
                    <dd><a href="/findAllClassroom">教室信息管理</a></dd>
                 <!--   <dd><a href="javascript:;">list 2</a></dd>
                    <dd><a href="">超链接</a></dd>-->
                </dl>
            </li>



        </ul>
    </div>
</div>

<div class="layui-body">


    <!--<%&#45;&#45;     -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;%>-->

        <a id="add"   class="layui-btn layui-btn-normal" href="javascript:;">添加教室信息</a>



        <table border="2"  class="hovertable">
            <thead>
            <tr>
                <td>主键ID</td>
                <td>区域</td>
                <td>楼号</td>
                <td>楼层</td>
                <td>教室id</td>
                <td>教室的编号</td>
                <td>教室名称</td>
                <td>容纳人数</td>
                <td>使用状态 0-使用 1-未使用 2-维修中</td>
                <td>删除标志 0-正常 1-删除</td>
                <td>创建时间</td>
                <td>修改时间</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="hovertable_tbody">

            </tbody>

        </table>
        <center>
        <p>
            <input type="button" pageNum="1" id="beforePage" value="上一页">
            <input type="button" pageNum="1" id="nextPage" value="下一页">
        </p>
        </center>



    <script type="text/javascript" th:src="@{/static/libs/jquery/jquery-3.5.1.js}"></script>
    <script type="text/javascript">


        $("#add").click(function (){

            window.location.href="@{/addTzClassroom}";

        })



        function updateClassroom(pkId){
            alert(pkId);
            window.location.href="${pageContext.request.contextPath}/toModify/"+pkId+"";

        }



        function removeclssroom(pkId){
            /*  confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。*/
            if(confirm("你确定要删除吗？")){

                $.ajax({

                    type:'post',
                    url:'/deleteClassroom',
                    data:{pkId:pkId},
                    dataType:'json',
                    success:function(d){

                        alert("删除成功")

                    },
                    error:function(e){
                        alert("删除失败4444");
                    }


                })


            }else{
                alert("你没有执行删除。。");
            }

        }





        $(function () {
            pageUtil(1);
            $("#beforePage").click(function (){
                let pageNum=parseInt($(this).attr("pageNum"))-1;
                $("#hovertable_tbody tr").remove();
                $("#beforePage").attr("pageNum",pageNum);
                $("#nextPage").attr("pageNum",pageNum);
                alert(pageNum);
                pageUtil(pageNum);
            })
            $("#nextPage").click(function (){
                let pageNum=parseInt($(this).attr("pageNum"))+1;
                $("#hovertable_tbody tr").remove();
                $("#beforePage").attr("pageNum",pageNum);
                $("#nextPage").attr("pageNum",pageNum);
                alert(pageNum);
                pageUtil(pageNum);
            })


            //改变时间
            function transferTime(cTime) {     //将json串的一串数字进行解析
                var jsonDate = new Date(parseInt(cTime));
                //       alert(jsonDate);
                //为Date对象添加一个新属性，主要是将解析到的时间数据转换为我们熟悉的“yyyy-MM-dd hh:mm:ss”样式
                Date.prototype.format = function(format) {
                    var o = {
                        //获得解析出来数据的相应信息，可参考js官方文档里面Date对象所具备的方法
                        "y+": this.getFullYear(), //得到对应的年信息
                        "M+": this.getMonth() + 1, //得到对应的月信息，得到的数字范围是0~11，所以要加一
                        "d+": this.getDate(), //得到对应的日信息
                        "h+": this.getHours(), //得到对应的小时信息
                        "m+": this.getMinutes(), //得到对应的分钟信息
                        "s+": this.getSeconds(), //得到对应的秒信息
                    }
                    //将年转换为完整的年形式
                    if(/(y+)/.test(format)) {
                        format = format.replace(RegExp.$1,    (this.getFullYear() + "") .substr(4 - RegExp.$1.length));
                    }
                    //连接得到的年月日 时分秒信息
                    for(var k in o) {
                        if(new RegExp("(" + k + ")").test(format)) {
                            format = format.replace(RegExp.$1,  RegExp.$1.length == 1 ? o[k] : ("00" + o[k]) .substr(("" + o[k]).length));
                        }
                    }
                    return format;
                }
                var newDate = jsonDate.format("yyyy-MM-dd hh:mm:ss");
                return newDate;
            }







        function pageUtil(pageNum){
                let json={"pageNum":pageNum};
                $.ajax({
                    type:'post',
                    url:'/findAllClassroom',
                    data:JSON.stringify(json), /*转换成json数据*/

                    /*向后台发送数据的格式必须为json字符串*/
                    contentType:'application/json;charset=utf-8',
                    dataType:'json',
                    success:function(data){
                        let $tr=""

                        for(var i=0;i<data.list.length;i++){
                            $tr+= "<tr> <td>"+data.list[i].pkId+"</td><td>"
                                +data.list[i].area+"</td><td>"
                                +data.list[i].buildingNo+"</td><td>"
                                +data.list[i].buildingFloor+"</td><td>"
                                +data.list[i].classroomId+"</td><td>"
                                +data.list[i].classroomNumber+"</td><td>"
                                +data.list[i].classroomName+"</td><td>"
                                +data.list[i].galleryful+"</td><td>"
                                +data.list[i].useStatus+"</td><td>"
                                +data.list[i].deleteFlag+"</td><td>"
                                +transferTime(data.list[i].createTime ) +"</td><td>"
                                +transferTime( data.list[i].updateTime )+"</td><td><a href='javascript:;' onclick= 'return updateClassroom("+data.list[i].pkId +")'><img src='${pageContext.request.contextPath}/img/xiugai.png' alt='修改' title='修改'/></a><a href='javascript:;' onclick= 'removeclssroom("+data.list[i].pkId +")'><img src='${pageContext.request.contextPath}/img/schu.png' alt='删除'  title='删除'/></a></td></tr>";

                        }
                        $tr+="";
                        console.log($tr);
                        $("#hovertable_tbody").append($tr);

                    },
                    error:function(e) {
                        alert("失败")
                    }
                })
            }
        })

    </script>



</div> <!--layui-body内容的div-->




<div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
</div>
</div>
<script th:src="@{/static/libs/layui/layui.js}"></script>

</body>
</html>
